import React, { Component } from 'react'

export default class Tab extends Component {
    state = {
        count: 0
    }
    changeCount = (count) => {
        this.setState({
            count
        })
    }
    render() {
        const { count } = this.state
        const { arr, type } = this.props
        return (
            <div>
                <div className = { type }>
                    {
                        arr.map((item, index) => {
                            return <span onClick = {() => {
                                this.changeCount(index)
                            }} className = { count === index? "active": ""} key = { index }>
                                { item }
                            </span>
                        })
                    }
                </div>
                <div>
                    { arr[count]}
                </div>
            </div>
        )
    }
}
